<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>登录</title>
  <!-- 样 式 文 件 -->
  <link rel="stylesheet" th:href="@{/themes/pear/css/pear.css}" />
  <link rel="stylesheet" th:href="@{/common/css/other/login.css}" />
</head>
<!-- 代 码 结 构 -->

<body th:background="@{/common/images/background.svg}" style="background-size: cover;">
  <form class="layui-form" action="javascript:void(0);">
    <div class="layui-form-item">
      <img class="logo" th:src="@{/common/images/logo.png}" />
      <div class="title">Pear Admin</div>
      <div class="desc">
         明 湖 区 最 具 影 响 力 的 设 计 规 范 之 一
      </div>
    </div>
    <div class="layui-form-item">
      <input placeholder="账 户 : admin " name="username" lay-verify="required" hover class="layui-input" value="admin" />
    </div>
    <div class="layui-form-item">
      <input placeholder="密 码 : admin " name="password" lay-verify="required" hover class="layui-input" type="password" value="123456" />
    </div>
    <div class="layui-form-item">
      <input placeholder="验证码 : " name="imageCode" hover lay-verify="required" class="code layui-input layui-input-inline" value="1" />
      <img th:src="@{/code/image}" class="codeImage" id="captchaImage" style="cursor: pointer;" />
    </div>
    <div class="layui-form-item">
      <input type="checkbox" name="remember-me" title="记住我" lay-skin="primary">
    </div>
    <div class="layui-form-item">
      <button class="pear-btn pear-btn-success login" lay-submit lay-filter="login">
        登 入
      </button>
    </div>
  </form>
  <!-- 资 源 引 入 -->
  <script th:src="@{/plugins/layui/layui.js}"></script>
  <script th:src="@{/themes/pear/pear.js}"></script>
  <script>
    layui.use(['form','button','layer','popup','toast','jquery'],function() {
      var form=layui.form;
      let $ = layui.jquery;
      let layer = layui.layer;
      var button=layui.button;
      var popup=layui.popup;
      let toast = layui.toast;
      let captchaPath = "/hm/admin/code/image";
      // toast.error({title:"危险消息",message:"[[${ERROR_MESSAGE}]]"})

      // 登 录 提 交
      form.on('submit(login)',function(data) {
        let loader = layer.load();
        let btn = button.load({elem: '.login'});

        $.ajax({
          url: '/hm/admin/loginProcessing',
          data: data.field,
          type: "post",
          dataType: 'json',
          success: function (result) {
            layer.close(loader);
            btn.stop(function () {
              if (result.success) {
                popup.success(result.msg, function () {
                  console.log('成功')
                  location.href = "/hm/admin/index";
                })
              } else {
                popup.failure(result.msg, function () {
                  document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
                });
              }
            })
          }
        });

        // /// 验证
        //
        // /// 登录
        //
        // /// 动画
        // button.load({
        //   elem: '.login',
        //   time: 1500,
        //   done: function() {
        //     popup.success("登录成功",function() {
        //       location.href="/index.html"
        //     });
        //   }
        // })
        return false;
      });

      //图片验证码点击切换
      $("#captchaImage").click(function () {
          $(this).attr("src",captchaPath + "?"+ Math.random());
      });

      // 平时测试就关闭了,否则30秒请求一次,防止验证码失效.后台60秒会失效
      // setInterval(function () {
      //   document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
      // }, 30 * 1000);

    });
  </script>
</body>

</html>